<template>
  <div class="search" >
    <Drawer v-model="modalVisible" :title="modalTitle" width="40" @on-cancel="handleClose">
      <Tabs @on-click="handleTabClick" :value="current">
        <TabPane label="基本信息" name="form1">
          <route-info ref="form1" :parent-visable.sync="modalVisible"></route-info>
        </TabPane>
      </Tabs>
      <div class="drawer-footer">
        <Button type="default" @click="handleClose">取消</Button>&nbsp;
        <Button type="primary" @click="handleSubmit" :loading="saving">保存</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import RouteInfo from './form/route-info'

export default {
  name: 'RouteModal',
  components: { RouteInfo },
  props: {},
  data () {
    return {
      saving: false,
      modalVisible: false,
      isEdit: false,
      modalTitle: '',
      current: 'form1',
      routeName: '',
      formData: {},
      forms: [
        'form1'
      ]
    }
  },
  methods: {
    handleShow (data) {
      this.isEdit = false
      this.routeName = ''
      if (data && data.routeId) {
        this.isEdit = true
        this.routeName = data.routeName
        this.formData = data
      } else {
        this.formData = {}
      }
      this.handleTabClick('form1')
      this.modalVisible = true
    },
    handleClose () {
      this.$refs[this.current].handleReset()
      this.modalVisible = false
    },
    handleSubmit () {
      this.$refs[this.current].handleSubmit()
    },
    handleTabClick (name) {
      this.current = name
      this.modalTitle = this.isEdit ? `编辑 - ${this.routeName}` : '新增'
      this.$refs[this.current].setData(this.formData)
    }
  },
  created () {
    // 监听modal关闭事件
    this.$bus.on('closeModal', (name) => {
      this.modalVisible = false
    })
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
